<template>
  <div class="container">
    <div class="row between">
      <div>{{data.created_at
        }}</div>
      <div class="orderStutas">{{status}}</div>
    </div>
    <div class="split"></div>
    <product-card :data="data.product_info" :orderId="data.order_id" :status="data.order_status"></product-card>
    <div class="row right">
      <div class="total-price">共{{data.order_num}}件产品 &nbsp;&nbsp;合计 : ￥{{data.order_payment}}</div>
    </div>
  </div>
</template>

<script>
import ProductCard from '@/components/ProductCard'
import config from '@/config'
export default {
  props: ['data'],
  data () {
    return {

    }
  },
  components: {
    ProductCard
  },
  computed: {
    status () {
      var status = config.orderStatus
      return status[this.data.order_status]
    }
  }
}
</script>

<style scoped lang="scss">
.container {
  font-size: 26rpx;
  .row {
    display: flex;
    align-items: center;
  }
  .between {
    justify-content: space-between;
  }
  .total-price {
    font-size: 10px;
    height: 50rpx;
    line-height: 50rpx;
  }
  .right {
    justify-content: flex-end;
    .btn {
      font-size: 26rpx;
      height: 50rpx;
      border-radius: 30rpx;
      text-align: center;
      line-height: 46rpx;
      margin-left: 20rpx;
      width: 150rpx;
    }
    .cancel {
      border: 1rpx solid #6d6d6d;
      color: #6d6d6d;
    }
    .pay {
      border: 1rpx solid #cdb27e;
      color: #cdb27e;
    }
  }
  .split {
    height: 20rpx;

    border-bottom: 1rpx solid #f0f0f0;
    background: transparent;
  }
  .orderStutas {
    color: #b93a39;
  }
  .card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 200rpx;
    border-bottom: 1rpx solid #f0f0f0;
    .thumb {
      width: 160rpx;
      height: 160rpx;
      border-radius: 15rpx;
    }
    .info {
      width: 460rpx;
      height: 160rpx;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      // border: 1rpx solid #000;
      .spec {
        font-size: 20rpx;
        color: #747474;
        margin-bottom: 5rpx;
        overflow: hidden;
        text-overflow: ellipsis;
        position: relative;
        bottom: 10rpx;
      }
      .text {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        height: 75rpx;
        font-size: 600;
      }
      .row {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        height: 35rpx;
        line-height: 26rpx;
        .price {
          color: #b93a39;
          font-size: 36rpx;
          font-weight: 400;
          .price-icon {
            font-size: 24rpx;
            display: inline-block;
          }
        }
        .count {
          font-size: 20rpx;
        }
      }
    }
  }
}
</style>
